<template>
    <div class="recommend" ref="recommend">
        <scroll class="recommend-content" ref="scroll" :data="discList">
						<div>
							<div class="slider-wrapper" v-if="recommends.length">
									<div class="slider-content">
											<slider ref="slider">
													<div v-for="(item,index) of recommends" :key="index">
															<a :href="item.linkUrl">
																	<img class="needsclick" @load="loadImg" :src="item.picUrl">
															</a>
													</div>
											</slider>
									</div>
							</div>
							<div class="recommend-list">
									<h1 class="list-title">
											热门歌单推荐
									</h1>
									<ul>
											<li class="item" v-for="item of discList" :key="item.id">
													<div class="icon">
															<img width="60" height="60" v-lazy="item.imgurl" alt="" />
													</div>
													<div class="text">
															<h2 class="name" v-html="item.creator.name"></h2>
															<p class="desc" v-html="item.dissname"></p>
													</div>
											</li>
									</ul>
							</div>
						</div>
						<div class="loading-container" v-if="!discList.length">
							<loading></loading>
						</div>
        </scroll>
    </div>
</template>
<script>
		import Loading from 'base/loading/loading'
		import Scroll from 'base/scroll/scroll'
    import Slider from 'base/slider/slider'
    import {getRecommend,getDiscList} from 'api/recommend'
		import {ERR_OK} from 'api/config'
		import {playlistMixin} from 'common/js/mixin'
    export default {
				mixins: [playlistMixin],
        data() {
            return {
                recommends: [],
                discList: []
            }
        },
        created() {
						setTimeout(()=>{
							this._getRecommend()
						})
            
            this._getDiscList()
        },
        components: {
						Slider,
						Scroll,
						Loading
        },
        methods: {
						handlePlaylist(playlist) {
                const bottom = playlist.length > 0 ? '60px' : ''
                this.$refs.recommend.$el.style.bottom = bottom
                this.$refs.scroll.refresh()
            },
            _getRecommend() {
                getRecommend().then((res)=>{
                    if (res.code === ERR_OK) {
                       this.recommends = res.data.slider;
                    }
                })
            },
            _getDiscList() {
                getDiscList().then((res)=>{
                    if (res.code === ERR_OK) {
                        this.discList = res.data.list
                    }
                })
						},
						loadImg() {
							this.$refs.scroll.refresh()
						}
        },
    }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .recommend
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .recommend-content
      height: 0
      padding-bottom 40%
			background #252525
      .slider-wrapper
        position: relative
        width: 100%
        height: 0
        padding-top: 40%
        overflow: hidden
        .slider-content
          position: absolute
          top: 0
          left: 0
          width: 100%
          height: 100%

	.recommend-list
		.list-title
			height: 65px
			line-height: 65px
			text-align: center
			font-size: $font-size-medium
			color: $color-theme
		.item
			display: flex
			box-sizing: border-box
			align-items: center
			padding: 0 20px 20px 20px
			.icon
				flex: 0 0 60px
				width: 60px
				padding-right: 20px
			.text
				display: flex
				flex-direction: column
				justify-content: center
				flex: 1
				line-height: 20px
				overflow: hidden
				font-size: $font-size-medium
				.name
					margin-bottom: 10px
					color: $color-text
				.desc
					color: $color-text-d
	.loading-container
		position: absolute
		width: 100%
		top: 50%
		transform: translateY(-50%)
</style>
